import { defineComponent, reactive, onMounted } from 'vue'
import { ElDialog, ElRow, ElCol, ElInput, ElSpace, ElButton, ElMessage } from 'element-plus'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'SetLamppostScope',
  props: ['visible', 'onClose'],
  emits: ['handleChange'],
  setup(props, { emit }) {
    const store = useStore()
    const state = reactive<{ value: number | string }>({
      value: ''
    })
    const handleChange = () => {
      if (state.value < 10 || state.value > 500) {
        ElMessage({
          type: 'warning',
          message: '请输入范围 (默认以站点为中心半径50米范围) 10 ~ 500'
        })
        return
      }
      emit('handleChange', state.value)
      props.onClose()
    }
    onMounted(async () => {
      const res = await store.dispatch('base/GetLampPostScope')
      if (res.code === 200) {
        state.value = res.data
      }
    })
    return () => (
      <ElDialog
        title="灯杆查找范围"
        width="650px"
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        modelValue={props.visible}
        beforeClose={props.onClose}
        v-slots={{
          footer: () => (
            <ElRow justify="space-between">
              <ElCol span={18}></ElCol>
              <ElCol span={6}>
                <ElSpace>
                  <ElButton size="default" type="primary" plain onClick={props.onClose}>
                    取消
                  </ElButton>
                  <ElButton size="default" type="primary" onClick={handleChange}>
                    确定
                  </ElButton>
                </ElSpace>
              </ElCol>
            </ElRow>
          )
        }}
      >
        <div style="width: 100%; height: 30px;"></div>
        <ElRow>
          <ElCol span={18} offset={2}>
            <ElInput
              v-model={state.value}
              placeholder="请输入范围 (默认以站点为中心半径50米范围) 10 ~ 500"
              v-slots={{
                append: () => <div>米</div>
              }}
            />
          </ElCol>
        </ElRow>
        <div style="width: 100%; height: 30px;"></div>
        {/* <ElRow>
          <ElCol span={18} offset={2}>
            <ElLink type="primary">
              关键需求说明：持久化数据，未勾选当前设置只针对此条站点数据有效
            </ElLink>
          </ElCol>
        </ElRow> */}
        <div style="width: 100%; height: 30px;"></div>
      </ElDialog>
    )
  }
})
